<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="spreadjs culture" content="zh-cn" />
    <title>包含样式和公式</title>

    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.excel2013white.18.2.0.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.grapecity.com/spreadjs/hosted/css/gc.spread.sheets.designer.18.2.0.min.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.all.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/resources/zh/gc.spread.sheets.resources.zh.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.shapes.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.charts.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.slicers.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.tablesheet.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.print.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.pdf.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.barcode.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.pivot.pivottables.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/plugins/gc.spread.sheets.ganttsheet.18.2.0.min.js"></script>
    <script src="https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.2.0/spread-sheets-io/dist/gc.spread.sheets.io.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.cn.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.all.18.2.0.min.js"></script>
    <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/interop/gc.spread.excelio.18.2.0.min.js"></script>
    <script src="https://cdn.grapecity.com.cn/spreadjs/scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/spread/source/js/FileSaver.js" type="text/javascript"></script>

    <style type="text/css">
        html,
        body {
            overflow: hidden;
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #gc-designer-container {
            height: 90vh;
            width: 100vw;
        }

        label {
            font-size: 12px;
            text-align: middle;
        }

        .flex {
            display: flex;
            align-items: center;
        }

        #btn {
            margin-left: 100px;
        }

        #checkbox {
            width: 20px;
        }

        #filename {
            margin-left: 20px;
        }
    </style>
</head>

<body unselectable="on">
    <div class="flex">
        <!-- <input type="file" id="file" /> -->
        <input type="checkbox" id="checkbox1" checked />
        <label for="checkbox1">是否包含样式</label>

        <input type="checkbox" id="checkbox2" checked/>
        <label for="checkbox2">是否包含公式</label>

        <input type="checkbox" id="checkbox3" checked/>
        <label for="checkbox3">是否包含未使用的样式</label>
        
        <select id="filename" placeholder="文件名称"></select>
        <button id="btn">导入</button>
    </div>
    <div id="gc-designer-container"></div>


</body>
<script type="text/javascript">
    let designer = new GC.Spread.Sheets.Designer.Designer("gc-designer-container");
    let spread = designer.getWorkbook();
    document.getElementById("btn").addEventListener("click", function () {
        let fileName = document.getElementById("filename").value
        fetch(`/api/download/template/${fileName}`).then(res => res.blob()).then(blob => {
            let checked1 = document.getElementById("checkbox1").checked
            let checked2 = document.getElementById("checkbox2").checked
            let checked3 = document.getElementById("checkbox3").checked
            console.time("import time")
            spread.import(blob, function () {
                console.timeEnd("import time")
            }, function () { }, {
                includeStyles: checked1,
                includeFormulas: checked2,
                includeUnusedStyles: checked3
            })
        })
    })

    fetch('/api/get-file-list/template').then(res => res.json()).then(json => {
        let select = document.getElementById("filename")
        json.forEach(v => {
            let op = document.createElement("option")
            op.setAttribute("label", v)
            op.setAttribute("value", v)
            select.append(op)
        })
    })
</script>
<script>
    // 生成复杂样式文件
    // let rt = 2000
    // let ct = 300
    // sheet.setRowCount(rt)
    // sheet.setColumnCount(ct)
    // let colors = generateGradientColors(ct)
    // console.log(colors)
    // spread.suspendPaint()

    // let bt = 10000
    // let colors2 = generateGradientColors(bt)
    // for (let i = 0; i < bt; i++) {
    //     console.log(`${i}/${bt}`)
    //     let r = Math.floor(Math.random() * rt)
    //     let c = Math.floor(Math.random() * ct)
    //     let rc = Math.floor(Math.random() * 15)
    //     let cc = Math.floor(Math.random() * 5)
    //     rc + r > rt ? rc = rt - r : ""
    //     cc + c > ct ? cc = ct - c : ""
    //     console.log(r, c, rc, cc)
    //     let cellRange = sheet.getRange(r, c, rc, cc)
    //     cellRange.backColor(colors2[i].backColor)
    //     cellRange.foreColor(colors2[i].foreColor)
    // }
    // for (let c = 0; c < ct; c++) {
    //     if (c % 2 == 0) {
    //         console.log(`${c}/${ct}`)
    //     }
    //     for (let r = 0; r < rt; r++) {
    //         sheet.setValue(r, c, r * c)
    //     }
    //     let style = new GC.Spread.Sheets.Style()
    //     style.backColor = colors[c].backColor
    //     style.foreColor = colors[c].foreColor
    //     style.borderBottom = new GC.Spread.Sheets.LineBorder(colors[c].foreColor, GC.Spread.Sheets.LineStyle.double)
    //     sheet.setStyle(-1, c, style)
    // }

    // spread.resumePaint()

    // function generateGradientColors(count) {
    //     // 生成基色 - 使用渐变而非完全随机
    //     let baseHue = Math.random() * 360;

    //     const colors = [];

    //     let i = 0
    //     while (true) {
    //         if (i >= count) {
    //             break
    //         }
    //         // 基于基色生成渐变色
    //         const hue = (baseHue + i * (360 / count)) % 360;

    //         // 生成背景色 - 使用较低的亮度
    //         const bgColor = hslToHex(hue, 70 + Math.random() * 20, 30 + Math.random() * 15);

    //         // 生成前景色 - 使用较高的亮度并与背景色形成对比
    //         const fgHue = (hue + 180) % 360; // 使用互补色
    //         const fgColor = hslToHex(fgHue, 60 + Math.random() * 30, 80 + Math.random() * 15);

    //         const contrast = getColorContrast(hexToRgb(fgColor), hexToRgb(bgColor));
    //         // 计算对比度
    //         colors.push({
    //             foreColor: fgColor,
    //             backColor: bgColor,
    //             contrast: contrast
    //         });
    //         i++
    //     }

    //     return colors;
    // }

    // function hslToHex(h, s, l) {
    //     // 将HSL颜色转换为十六进制格式
    //     h /= 360;
    //     s /= 100;
    //     l /= 100;

    //     let r, g, b;

    //     if (s === 0) {
    //         r = g = b = l;
    //     } else {
    //         const hue2rgb = (p, q, t) => {
    //             if (t < 0) t += 1;
    //             if (t > 1) t -= 1;
    //             if (t < 1 / 6) return p + (q - p) * 6 * t;
    //             if (t < 1 / 2) return q;
    //             if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
    //             return p;
    //         };

    //         const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    //         const p = 2 * l - q;

    //         r = hue2rgb(p, q, h + 1 / 3);
    //         g = hue2rgb(p, q, h);
    //         b = hue2rgb(p, q, h - 1 / 3);
    //     }

    //     const toHex = x => {
    //         const hex = Math.round(x * 255).toString(16);
    //         return hex.length === 1 ? '0' + hex : hex;
    //     };

    //     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
    // }

    // function hexToRgb(hex) {
    //     const result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);
    //     return result ? [
    //         parseInt(result[1], 16),
    //         parseInt(result[2], 16),
    //         parseInt(result[3], 16)
    //     ] : [0, 0, 0];
    // }

    // function getColorContrast(color1, color2) {
    //     // 辅助函数：计算相对亮度（WCAG标准）
    //     const getRelativeLuminance = (r, g, b) => {
    //         const normalize = val => val / 255;
    //         const linearize = val =>
    //             val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);

    //         const [rNorm, gNorm, bNorm] = [r, g, b].map(normalize);
    //         return 0.2126 * linearize(rNorm) +
    //             0.7152 * linearize(gNorm) +
    //             0.0722 * linearize(bNorm);
    //     };

    //     // 转换颜色并计算亮度
    //     const [r1, g1, b1] = color1
    //     const [r2, g2, b2] = color2

    //     const luminance1 = getRelativeLuminance(r1, g1, b1);
    //     const luminance2 = getRelativeLuminance(r2, g2, b2);

    //     // 计算对比度（确保L1是较亮颜色）
    //     const L1 = Math.max(luminance1, luminance2);
    //     const L2 = Math.min(luminance1, luminance2);

    //     return Number(((L1 + 0.05) / (L2 + 0.05)).toFixed(2));
    // }
</script>
<script>
    // 生成长公式
    // fetch("/api/download/template/打折公式.sjs").then(res => res.blob()).then(blob => {
    //     spread.open(blob, function () {
    //         sheet = spread.getActiveSheet()
    //         spread.suspendPaint()
    //         let rowCount = 20000
    //         sheet.setRowCount(rowCount)
    //         let start = 3
    //         for (let r = start; r < rowCount; r++) {
    //             if (r % 100 == 0) {
    //                 console.log(`${r}/${rowCount}`)
    //             }
    //             sheet.setValue(r, 0, Math.floor(Math.random() * 500))
    //             let rand = Math.random()
    //             if (rand < 0.3) {
    //                 sheet.setValue(r, 1, "NONE")
    //             } else if (rand < 0.7) {
    //                 sheet.setValue(r, 1, "MEMBER")
    //             } else {
    //                 sheet.setValue(r, 1, "VIP")
    //             }
    //         }
    //         sheet.fillAuto(
    //             new GC.Spread.Sheets.Range(2, 2, 1, 1),
    //             new GC.Spread.Sheets.Range(2, 2, rowCount - start, 1),
    //             {
    //                 fillType: GC.Spread.Sheets.Fill.FillType.auto,
    //                 series: GC.Spread.Sheets.Fill.FillSeries.column,
    //                 direction: GC.Spread.Sheets.Fill.FillDirection.down
    //             }
    //         )
    //         spread.resumePaint()
    //     })
    // })
</script>

</html>